<template>
  <div class="copy-node" v-show="list.length">
    <!-- <div class="mb10">抄送人</div> -->
    <el-divider content-position="left">
        <!-- <el-tag> -->
            抄送人
            <!-- </el-tag> -->
    </el-divider>
    <div class="df-center content">
      <el-card
        :body-style="{ padding: '0px' }"
        v-for="(item, index) in list"
        :key="index"
        class="copy-node__item"
      >
        <img
          class="copy-node__avatar mb10"
          :src="item.avatar || defaultAvatar"
          alt=""
        />
        <div class="mb10 ell" :title="item.realName">{{ item.realName }}</div>
        <div class="ell" :title="item.roleName">{{ item.roleName }}</div>
      </el-card>
    </div>
  </div>
</template>

<script>
import defaultAvatar from '@/assets/default-logo.jpg'
export default {
  name: 'CustomeComponent',
  components: {},
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      defaultAvatar
    }
  },
  computed: {},
  watch: {},
  created () {},
  methods: {}
}
</script>
<style lang="scss" scoped>
.copy-node {
  .content {
    border: 1px solid rgba(25, 137, 250, 0.3);
    border-radius: 5px;
    padding: 10px 10px 0px 10px;
    background: rgba(25, 137, 250, 0.2);
  }
  &__item {
    width: 90px;
    padding: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: center;
  }
  &__avatar {
    display: inline-block;
    width: 40px;
    height: 40px;
  }
}
</style>
